<template>
	<div class="set-address">
		<!-- 头部 -->
		<div class="nav_top d-flex jc-between ai-center bg-white">
			<div> 
				<el-button type="text" @click="back">
					<div class="iconfont icon-back ml-3 fs-xxxl text-dark"></div>
				</el-button>
			</div>
			<div class="fs-xxl text-dark pr-3">
				{{title}}
			</div>
			<div>
			</div>
		</div>

		<div class="address-form px-3">
			<div class="d-flex ai-center">
				<span>当前位置</span>
				<div class="flex-1">
					<router-link to="/baiduMap">
						<div class="d-flex jc-between">
							<input class="flex-1" type="text" readonly="readonly" placeholder="请选择" v-model="address" id='addressText' />
							<div class="iconfont icon-right" style="line-height: 50px;"></div>
						</div>		
					</router-link>
				</div>

			</div>	
			<div>
				<span>收&nbsp;&nbsp;货&nbsp;&nbsp;人</span>
				<input type="text" maxlength="10" v-model="consignee" />
			</div>
			<div>
				<span>联系电话</span>
				<input type="number" maxlength="11" v-model="mobilePhone" />
			</div>	


			<div>
				<span>详细地址</span>
				<input type="text" maxlength="50" v-model="deliveryAddress" placeholder="楼栋和门牌号" />
			</div>	
			<div class="pt-2">
				<!-- <el-checkbox v-model="isDefault">设置为当前地址</el-checkbox> -->
			</div>

		</div>

		<div style="text-align: center;">
			<el-button type="danger" id="saveBtn" class="save-button" @click="save()">保存并使用
			</el-button>
		</div>
		
		
	</div>
</template>

<script>

	import { Popup, Toast } from "mint-ui";

	export default {
		components: {
			mtPopup: Popup,
		},
		watch:{
            '$route'(to,from){
               this.getInfo();
            }
        },
		props: ["id"],
		data() {
			return {
				address: "",
				addressId: "",
				consignee: "",
				deliveryAddress: "",//地址
				mobilePhone: "",
				addressObj: {
				},
				title: "收货信息填写"
				
			};
		},
		
		methods: {

            back(){
               this.$router.push('/addressList')
               this.$store.commit('deleteAddress')
               this.$store.commit('deleteId')
            },
            async getInfo(){
            	
            	if (this.id) {
            		this.title = "编辑收货地址";
            		this.$http.get(`user/findAddressById.do?id=${this.id}`).then(res => {
            			this.mobilePhone = res.data.phone
            			this.consignee = res.data.contact
            			this.address = this.$store.getters.getAddress ?  this.$store.getters.getAddress : res.data.address;
            			this.deliveryAddress = res.data.detail

            		})
            	}else {
                    this.address = this.$store.getters.getAddress;
            		console.log('获取到了')
            	}
            },
			async save() {
				if (this.consignee == "") {
					Toast("请填写收货人");
					return;
				}
				if (this.mobilePhone == "" && this.landlinePhone == "") {
					Toast("手机或固话必须填一个");
					return;
				}
				if (
					!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(
						this.mobilePhone
						) &&
					this.mobilePhone != ""
					) {
					Toast("手机号码填写不正确");
				return;
			}
			
		let regionNum = 0;
		if (this.addressValue == "") {
			Toast("请填写所在地区");
			return;
		}
		if (this.deliveryAddress == "") {
			Toast("请填写详情地址");
			return;
		}

	this.addressObj = {
		
		contact: this.consignee,
		address: this.address,
		phone: this.mobilePhone,
		detail: this.deliveryAddress
		// isDefault: this.isDefault
	};

    
		//最好放在布vuex里面
		this.$router.push({
			path: '/addressList',
			query: {
				addressObj: JSON.stringify(this.addressObj)
			}
		})

	//请求
	if (this.id) {
		this.$set(this.addressObj,'id',this.id)
		const res = await this.$http.post(`user/updateAddress.do`,this.addressObj)
		//提交修改   删除veux 的address
		this.$store.commit('deleteAddress')
		if(res.data.code != 0){
			Toast('修改成功')
			this.$router.push('/addressList')
		}else{
			Toast('网络错误！')
		}
	} else {
		const res = await this.$http.post(`user/addAddress.do`,this.addressObj)
		if (res.status == 200) {
			Toast('新增成功')
			this.$router.push('/addressList')
		}else{
			Toast('网络错误！')
		}
	}
}
},
created() {
	
	this.getInfo()
},

};
</script>

<style lang="scss" scoped>
.set-address {
	background-color: #ffffff;
}
.address-form {
	font-size: pxToRem(30px);
	color: #333;

	span {
		white-space: nowrap;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 auto;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		padding-right: pxToRem(10px);
	}
	input {
		padding-left: 20px;
		height: 50px;
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 100%;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
		border: 0;
		background: transparent;
		color: #333;
		font-size: 100%;
		text-indent: pxToRem(10px);
		outline: none;
	}
	.set {
		overflow: hidden;
		padding: pxToRem(20px);
	}
}

.address-form div {
	border-bottom: 1px solid #eeee;
	height: 50px;

}
.el-button {
  width: 92%;
}
</style>
